<template>
    <div>
        <h4>基础篇-响应式</h4>
        <div><b>ref：</b>{{ message1 }} / {{ message2.username }} / {{ message2.password }} </div>
        <div><b>reactive：</b> {{ message3.username }} / {{ message3.password }} </div>
        <button @click="btn">基础篇-响应式</button>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';


/**
 * 响应式处理
 * 【说明】：在Vue3中定义的数据默认是不具备响应式的，所有我们如果想让数据结构具备响应式，
 *          必须通过 ref() 或 reactive()、进行声明响应式状态
 * 
 * 【语法】：let message = 'Hello'          不具备响应式，数据改变页面中不会发生变化
 *          let message = ref('Hello')     声明响应式，数据发生，页面即可有数据响应
 *          let message = reactive({})     同样是声明响应式
 * 【步骤】：
 *          当通过ref()或reactive()进行响应式状态时，需要导入ref和reactive()
 * 
 * 【注意事项】：
 *          ref() 中的数据必须通过.value的方式获取
 *          ref() 可以管理基本数据类型以及复杂数据类型
 *          ref() 定义的数据 在template 可以进行自动解包、所以不用通过.value 获取、但在script不能
 *          reactive() 要求传入的数据类型有限制、必须是对象或者是数组、如果传入基本类型会报错
 */

/**
 * ref()
 */
let message1 = ref("Hello") // 定义基本类型数据
let message2 = ref({ username: "admin", password: 123456 }) // 定义引用类型数据


/**
 * reactive
 */
let message3 = reactive({ username: "zhangsan", password: 123456 }) // 定义引用类型数据4


const btn = () => {
    // 修改ref声明的状态
    message1.value = "Vue ref"
    message2.value.username = "zhangsan"
    message2.value.password = "zhangsan"

    // 修改 reactive 声明的状态
    message3.username = "lisi"
    message3.password = "lisi"
}



</script>

<style lang="scss" scoped></style>